<%--
  Created by IntelliJ IDEA.
  User: Yy
  Date: 2022/5/22
  Time: 19:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>
    <script>
        layui.use(['tree','util','jquery','form', 'layer','table'], function(){
            var tree = layui.tree;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
            var classId;
            var table1;
            $.ajax({
                url: '${pageContext.request.contextPath}/stu/banjifp',
                dataType: 'json',
                success: function(res){
                    //仅节点左侧图标控制收缩
                    tree.render({
                        elem: '#test2'
                        ,data: res.data
                        ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                        ,click: function(obj){
                            var data = obj.data;  //获取当前点击的节点数据 获取班级id
                            classId=data.id;
                            layer.msg('<br>节点数据：' + JSON.stringify(data));
                            table1= table.render({
                                elem:'#tableData',//指定id选择器
                                cols:[[
                                    {field:'className',title:'班级名称'},
                                    {field:'stuname',title:'学生姓名'},
                                    {field:'sex',title:'性别'},
                                    {field:'phone',title:'电话号码'},
                                ]],
                                url:'${pageContext.request.contextPath}/stu/yfblist?classId='+classId,//请求路径
                                method:'post',//请求方式
                                page:true,//显示分页组件
                                limits:[10,20,30,40,50],//切换的每页行数
                                limit:10,//默认的每页行数
                                loading:true,//数据加载效果样式
                            });
                        }
                    });
                },
            });
            //分班
            $("#fb_btn").click(function(){
                var checkStatus = table.checkStatus('titleStu');
                var datas = checkStatus.data;
                var ids = [];
                // var clazz = $("#clazz").val();
                for(var i=0;i<datas.length;i++){
                    ids[i]=datas[i].enrollmentId;
                }
                // alert(ids);
                if(ids.length!=0){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/stu/classfb",
                        data:{
                            "ids":ids,
                            "clazz":classId
                        },
                        dataType:"json",
                        type:"post",
                        traditional:true,//防止深度序列化
                        cache:false,
                        async:false,
                        success:function(data){
                            layer.msg(data.msg);
                        }
                    });
                    table1.reload({
                        url:'${pageContext.request.contextPath}/stu/yfblist?classId='+classId
                    });
                    table.reload('titleStu',{
                        url:'${pageContext.request.contextPath}/stu/banjifplist'
                    });
                }
            })
        // });
            //头工具栏事件
            // table.on('toolbar(demo)', function (obj) {
            //     var checkStatus = table.checkStatus(obj.config.id)
            //         , data = checkStatus.data;
            //     switch (obj.event) {
            //         case '1':
            //
            //
            //             break;
            //     }
            // });
        });
    </script>
<body>
<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">--%>
<%--    <legend>班级分配</legend>--%>
<%--</fieldset>--%>
<div id="test2" class="demo-tree layui-side">
</div>

<div class="layui-body" style="width: 80%;">
    <div id="content" style="width: 100%; position: relative; margin-top: 0px;">
<%--        <h2>班级学生列表</h2>--%>
        <table style="width: 100%" class="layui-table" id="tableData" lay-filter="demo"></table>
    </div>
    <h2>待分班学生列表</h2>
    <button class="layui-btn layui-btn-sm" id="fb_btn" lay-event="1">分班</button>
    <table class="layui-table" id="titleStu" lay-filter="demo" lay-size="sm"
           lay-data="{url:'${pageContext.request.contextPath}/stu/banjifplist',page:true,id:'titleStu'}"
    >
        <thead>
        <tr>
            <th lay-data="{type:'checkbox'}"></th>
            <th lay-data="{field:'enrollmentId',sort:true}">编号</th>
            <th lay-data="{field:'studName',sort:true}">学生姓名</th>
            <th lay-data="{field:'sex',sort:true}">性别</th>
            <th lay-data="{field:'tell',sort:true}">手机号</th>
            <th lay-data="{field:'amount',sort:true}">预定报名费</th>
            <th lay-data="{field:'computer',sort:true}">是否送电脑</th>
            <th lay-data="{field:'testTime',sort:true}">试学时间</th>
            <th lay-data="{field:'signdate',sort:true}">录入时间</th>
<%--            <th lay-data="{toolbar:'#tools',width:150,align:'center',fixed:'right'}">操作</th>--%>
        </tr>
        </thead>
    </table>
<%--    <script type="text/html" id="tools">--%>
<%--        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>--%>
<%--    </script>--%>
</div>

</body>
</html>
